<template>
  <div class="wrapper" ref="wrapper">
    
    <ul class="content">
      <mt-spinner class="loading-top" type="fading-circle"></mt-spinner>
      <li v-for="(item,index) in data" :key="index">{{item._id}}</li>
    </ul>
    <div class="loading-wrapper"></div>
  </div>
</template>
<script>
import BScroll from "better-scroll";
import { queryArticles } from "../../api/articles.js";
export default {
  data() {
    return {
      data: [],
      page: 1
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    async loadData() {
      const res = await queryArticles({
        page: this.page,
        count: 10,
        all: true
      });
      console.log(res);
      if (res.data.length > 0) {
        this.data = res.data.concat(this.data);
        this.$nextTick(() => {
          if (!this.scroll) {
            this.scroll = new BScroll(this.$refs.wrapper, {});
            this.scroll.on("touchend", pos => {
              // 下拉动作
              console.log("lalla");
              if (pos.y > 50) {
                this.loadData();
              }
            });
          } else {
            this.scroll.refresh();
          }
        });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.wrapper {
  height: 100%;
}
.content li {
  height: 200px;
}
.loading-top {
  position: absolute;
  top: -60px;
  left: 50%;
}
</style>
